<template>
  <!-- 导航栏 -->
  <div>
    <van-nav-bar title="编辑资料" left-arrow @click-left="onClickLeft">
      <template #right>
        <span @click="saveInfo">保存</span>
      </template>
    </van-nav-bar>

    <!-- 用户头像 -->
    <!-- <van-row>
        <van-skeleton avatar />
    </van-row> -->
    <van-cell>
      <van-row>
        <van-col span="6" offset="9">
          <van-image round width="5rem" height="5rem" :src="info.img" />
        </van-col>
      </van-row>
    </van-cell>

    <!-- 用户信息 -->
    <van-field
      v-model="info.name"
      name="名字"
      label="名字"
      placeholder="名字"
      :rules="[{ required: true, message: '请填写名字' }]"
    />
    <van-field
      v-model="info.email"
      name="小蓝书号"
      label="小蓝书号"
      placeholder="小蓝书号"
      readonly
    />
    <van-field
      v-model="info.gender"
      name="性别"
      label="性别"
      placeholder="性别"
      :rules="[{ required: true, message: '请填写性别' }]"
    />
    <van-field
      v-model="info.birthday"
      is-link
      readonly
      name="生日"
      label="生日选择"
      placeholder="点击选择生日"
      @click="showPickerStatus = true"
    />
    <van-popup v-model:show="showPickerStatus" position="bottom">
      <van-datetime-picker
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onBirthConfirm"
        @cancel="showPickerStatus = false"
      />
    </van-popup>
    <van-field
      v-model="info.area"
      is-link
      readonly
      name="area"
      label="地区选择"
      placeholder="点击选择省市区"
      @click="showZoneStatus = true"
    />
    <van-popup v-model:show="showZoneStatus" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="onZoneConfirm"
        @cancel="showZoneStatus = false"
      />
    </van-popup>
    <van-field
      v-model="info.school"
      name="学校"
      label="学校"
      placeholder="学校"
      :rules="[{ required: true, message: '请填写学校' }]"
    />
  </div>
</template>

<script>
import { ref } from "vue";
import { Dialog } from "vant";
import { areaList } from "@vant/area-data";
import axios from "axios";
export default {
  name: "Edit",
  setup() {
    const VanDialog = Dialog.Component;

    const currentDate = ref(new Date(2021, 0, 17));

    return {
      VanDialog,
      currentDate,
      areaList,
    };
  },
  data() {
    return {
      info: {
        img: "",
        name: "name",
        email: "id",
        gender: "女",
        birthday: "",
        area: "",
        school: "",
      },
      showNameStatus: false,
      showPickerStatus: false,
      showZoneStatus: false,
      showIntroduceStatus: false,
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(2022, 1, 6),
    };
  },
  mounted() {
    //渲染个人数据
    this.info.email = localStorage.getItem("qq");
    this.info.img = localStorage.getItem("head");
    this.info.name = localStorage.getItem("name");
    //保存个人信息
    if (!localStorage.getItem("info")) {
      localStorage.setItem("info", JSON.stringify(this.info));
    }
    //渲染数据
    var item = JSON.parse(localStorage.getItem("info"));
    this.info.area = item.area;
    this.info.birthday = item.birthday;
    this.info.school = item.school;
    this.info.gender = item.gender;
  },
  methods: {
    onClickLeft() {
      this.$router.push("/mine");
    },
    showName() {
      this.showNameStatus = true;
    },
    onBirthConfirm(value) {
      this.info.birthday = `${value.getYear() + 1900}/${
        value.getMonth() + 1
      }/${value.getDate()}`;
      this.showPickerStatus = false;
    },
    onZoneConfirm(value) {
      this.info.area = value
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("-");
      this.showZoneStatus = false;
    },
    //保存信息
    saveInfo() {
      localStorage.setItem("info", JSON.stringify(this.info));
    },
  },
};
</script>

<style scoped>
</style>